<template>
<view class="login-code-box h100 bg-white text-black">
  <security-code
    event="mobilelogin"
    :hasCaptcha="true"
    phonePlaceholder="请输入手机号码"
    smsCodeTitle="手机验证码"
    smsCodePlaceholder="请输入验证码"
    @onChange="getSecurityParams">
  </security-code>

  <view class="flex flex-direction margin-top-xl padding">
    <button class="cu-btn dm-btn round bg-orange text-xl" @tap="onLogin">验证码登录</button>
  </view>

  <view class="text-grey text-center margin-top" @tap="gotoPage('login-pwd')">其他登录方式</view>
</view>
</template>

<script>
import securityCode from '@/components/security-code/security-code'

export default {
  name: 'login-code',
  components: { securityCode },
  data () {
    return {
      mobile: '',
      code: '',
    }
  },
  computed: {
    loginParams() {
      return {
        mobile: this.mobile,
        code: this.code
      }
    }
  },
  methods: {
    onLogin() {
      this.$api.mobileLogin(this.loginParams).then(async res => {
        if (!res) return
        console.log('验证码登录', res)
        const resData = res.data
        const {userinfo} = resData
        this.$store.dispatch('handleLogin', userinfo)
        await this.$showSuccessToast('登录成功')
        this.gotoHomePage()
      })
    },
    getSecurityParams(params) {
      this.mobile = params.mobile
      this.code = params.smsCode
    },
    gotoPage(routeName) {
      this.$Router.push({
        name: routeName
      })
    },
    gotoHomePage() {
      this.$Router.pushTab({ name: 'home' })
    }
  }
}
</script>

<style lang="less">
</style>
